<template>
  <div class="tab">
    <div class="tabBox">
        <div class="logo">
        <img src="../../../assets/前台logo.webp">
    </div>
    <div class="types">
        <!-- <div><router-link to="/mall/first" class="first"  >首页</router-link></div> -->
        <div class="items" v-for="(item,index) in activeList" :key="index">
            <a href="#" :class="{'active' : item.isActive}" @click="toFoodList(index)">{{ item.name }}</a>
        </div>
    </div>
    <div class="input">
        <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="inputValue"
            @keyup.enter.native="handleAddBook">
        </el-input>
    </div>
    <div class="cart">
        <div @click="toCart">
            <i class="el-icon-shopping-cart-1"></i>
        </div>
    </div>
    </div>
  </div>
</template>

<script>
import Bus from '../../../Bus'
export default {
    name:'Tab',
    data(){
        return{
            inputValue:'',
            activeList:[
                // {isActive:false,name:'默认'},
                {isActive:false,name:'全部'},
                {isActive:false,name:'居家'},
                {isActive:false,name:'食品'},
                {isActive:false,name:'服饰'},
                {isActive:false,name:'文化'},
                {isActive:false,name:'数码'},
                {isActive:false,name:'家电'},
            ]
        }
    },
    methods:{
        // 点击搜索框按下回车按钮
        enterEvent(){
            document.onkeydown = e =>{
                let body = document.getElementsByTagName('body')[0]
                if (e.keyCode === 13 && e.target.baseURI.match(/mall/) && e.target === body) {
                // match(此处应填写文件在浏览器中的地址，如 '/home/index')，不写的话，其他页面也会有调用回车按下的方法
                        console.log('enter');
                        this.handleAddBook(); //调用查询方法
                    }
                }
        },
        handleAddBook(){
            console.log('我按下了回车:',this.inputValue);
            Bus.$emit('回车事件',this.inputValue)
        },
        // 点击购物车图标跳往购物车页面
        toCart(){
            this.$router.push('/mall/cart')
        },
        // 点击分类名字统一跳转产品列表路由(query传参)
        toFoodList(index){
            this.$router.push({
                path:'/mall/product',
                query: { type: this.activeList[index].name }
            })
        this.activeList=this.activeList.map(function(item){
            item.isActive=false
            return item
        })
        this.activeList[index].isActive=true
        localStorage.setItem('activeList',JSON.stringify(this.activeList))
        // console.log(this.activeList);
        let type='type'
        Bus.$emit('更新type',type)
        }
    },
    mounted(){
        Bus.$on('更新tab',(data)=>{
            console.log('我点击了首页');
            this.activeList=[
                {isActive:false,name:'全部'},
                {isActive:false,name:'居家'},
                {isActive:false,name:'食品'},
                {isActive:false,name:'服饰'},
                {isActive:false,name:'文化'},
                {isActive:false,name:'数码'},
                {isActive:false,name:'家电'},
            ]
            console.log(this.activeList);
        })
        this.enterEvent()
        this.activeList=localStorage.getItem('activeList')?JSON.parse(localStorage.getItem('activeList')):this.activeList
  }
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
.active{
    color: rgb(39,186,155);
    font-weight: bold;
}
.types .active {
    color: rgb(39,186,155);
    /* color: red; */
    font-weight: 600;
}
.tab{
    width: 100%;
    height: 100px;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tabBox{
    width: 80%;
    height: 100px;
    /* background-color: greenyellow; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.logo{
    width: 11.52%;
    /* height: auto; */
    display: flex;
    align-items: center;
}
.logo img{
    width: 100%;
    height: auto;
}
.types{
    /* background-color: red; */
    width: 57.61%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* .types li{
    width: 90px;
    float: left;
} */
/* .first{
    width: 13%;
    height: 100px;
    font-size: 1.8vw;
    color: black;
} */
.items{
    width: 12%;
    height: 100px;
    line-height: 100px;
    text-align: center;
    
}

.items a{
    color: black;
    font-size: 1.8vw;
    text-decoration: none;
}
.first:hover,.items a:hover{
    color: rgb(39,186,155);
}
.input{
    width: 220px;
    height: 100px;
    /* background-color: orange; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.cart{
    /* background-color: aqua; */
    display: flex;
    justify-content: center;
    align-items: center;
    width:80px;
    height: 100px;
    cursor: pointer;
    font-size: 25px;
}
.cart a{
    color: black;
}
</style>